<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Chat - TRACER </title>
  
  <link href="stylesheets/custom.less" media="all" rel="stylesheet/less" type="text/css" />
  <script src="javascripts/less-1.0.41.js"></script>
  <script type="text/javascript" charset="utf-8">
    // Under development you should uncomment the following lines,
    // to make the browser refresh the changes that you are makeing in your app.less file.
    less.env = "development";
    less.watch();
  </script>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

</head>
<body>
  <header id="header">
    <div class="row">
      <div class="column grid-16">
          <p class="logoContainer">
          	<a href="dashboard.html" class="logo"> <span class="hide">TRACER</span> </a> 
          </p>
         
      </div>
    </div>
  </header>
  <div id="bodycontent">
    <div id="main-section">
    	
      <div class="row">
			 <div class="column  grid-5">
			 		<div class="leftpane box">
			 			<div class="chatprofile blue">
			 				<span class="photo"> <img width="72px" height="72px" src="images/m72.png" alt=""> </span>
							<div>Joe [Active] </div>
							<p>A curve in the road is not the end of it, unless you take a turn.</p>
			 			</div>
			 			<div class="chatlist">
			 				<div class="item orange">
								<span class="photo"> <img width="48px" height="48px" src="images/w48.png" alt="jane"> </span>
								<div>Jane [Active] </div>
								<p>Some people walk in the rain. Others simply get wet</p>			 				
			 				</div>
			 				<div class="item green">
								<span class="photo"> <img width="48px" height="48px" src="images/m48.png" alt=""> </span>
								<div>Jack [Online] </div>
								<p>A curve in the road is not the end of it, unless you take a turn.</p>			 				
			 				</div>
			 				<div class="item green">
								<span class="photo"> <img width="48px" height="48px" src="images/m48.png" alt=""> </span>
								<div>Billy [Online] </div>
								<p>A curve in the road is not the end of it, unless you take a turn.</p>			 				
			 				</div>
			 				<div class="item white">
								<span class="photo"> <img width="48px" height="48px" src="images/w48.png" alt=""> </span>
								<div>Jill [Away] </div>
								<p>A stitch in times saves nine</p>			 				
			 				</div>
			 				<div class="item white">
								<span class="photo"> <img width="48px" height="48px" src="images/m48.png" alt=""> </span>
								<div>Jaco [Away] </div>
								<p>jet set go!!</p>			 				
			 				</div>
			 				<div class="item white">
								<span class="photo"> <img width="48px" height="48px" src="images/w48.png" alt=""> </span>
								<div>Jenny [Away] </div>
								<p>Simply awsome</p>			 				
			 				</div>
			 			</div>
			 		
			 		</div>
			 </div>
			 <div class="column  grid-6">
			 		<div class="box chatpane ">
			 			<div class="chatprofile green">
			 				<span class="photo"> <img width="72px" height="72px" src="images/w72.png" alt=""> </span>
							<div>Jane [Active] </div>
							<p>Some people walk in the rain. Others simply get wet</p>
			 			</div>
			 			<div class="chat">
								<div class="green-bubble">Hi there..</div>
								<div class="blue-bubble">Hello Jane..</div>
								<div class="green-bubble">Joe, i was wondering if we could discuss about the new requirements that came in last week when you have some free time.</div>
								<div class="blue-bubble">Yeah jane..i was looking forward to it.. i will be free in 30 mins. Maybe we can discuss it over the coffee.</div>
								<div class="green-bubble">Sounds cool.. see you then. Bye Joe.</div>
								<div class="blue-bubble">Bye Jane..</div>	
										 			
			 			</div>
			 			<div class="send">
			 				<textarea rows="3" cols="35"  class="ta"></textarea>
			 				<input class="orange" type="button"  value="send"/>
			 				<span class="droparea"> Drop files to send </span>
			 			</div>
			 			
			 		
			 		</div>
			 </div>
			 <div class="column  grid-5">
			 		<div class="rightpane">
						<div class="history box">
							<h4>History</h4>		
							<p><a href="" > Yesterday </a></p>
							<p><a href="" > 23-June-2011</a></p>	
							<p><a href="" > 22-June-2011</a></p>
							<p><a href="" > 21-June-2011</a></p>	
							<p><a href="" > 20-June-2011</a></p>					
						</div>
						<div class="history box">
							<h4>Tickets</h4>		
							<p><a href="" > [#1231] Implement the new interface </a></p>
							<p><a href="" > [#1232] New logo for the enterprise </a></p>	
							<p><a href="" > [#1234] Refactoring the data access logic</a></p>
							<p><a href="" > [#1238] Analyse the application security implementation </a></p>	
							
						</div>			 		
			 		</div>
			 </div>
		</div>	
		 
			 	
    </div>
  </div>

  <footer>
    <div class="row">
      <div class="column grid-16">
        <p class="tal"><strong>TRACER</strong> is under MIT License</p>
        <p class="tac"><small>Copyright &copy; 2011 </small></p>
      </div>
    </div>
  </footer>
</body>
</html>
        

